<template>
  <div id="loading">
      <section>
          <div class="loader loader-1">
              <div class="loader-outter"></div>
              <div class="loader-inner"></div>
          </div>
          <div class="loader loader-2">
                <svg class="loader-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
                    <polygon points="29.8 0.3 22.8 21.8 0 21.8 18.5 35.2 11.5 56.7 29.8 43.4 48.2 56.7 41.2 35.1 59.6 21.8 36.8 21.8 " fill="#18ffff"></polygon>
                </svg>
                <div class="loader-circles"></div>
          </div>
      </section>
  </div>
</template>

<script>
import '../css/index.css'
import cookie from '../utils/auth'
export default {
    name:'Loading',
    data(){
        return {
            loading:true,
        }
    },
    mounted(){
        // 这里模仿token获取
            setTimeout(()=>{
                let token="Tokens"
                cookie.setToken(token)
                // this.$router.push({
                //     name:'/'
                // })
            },1000)
    },
}
</script>

<style lang="less" scoped>
    section{
        .middle{
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        @keyframes loader-1-outter {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes loader-1-inner{
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(-360deg);
            }
        }
        @keyframes loader-2-star {
            0% {
                -webkit-transform: scale(0) rotate(0deg);
                transform: scale(0) rotate(0deg);
            }
            100% {
                -webkit-transform: scale(0.7) rotate(360deg);
                transform: scale(0.7) rotate(360deg);
            }
        }
        @keyframes loader-2-circles{
            0% {
                box-shadow: 0 0 0 #18ffff;
                opacity: 1;
                transform: rotate(0deg);
            }
            50% {
                box-shadow: 24px -22px #18ffff, 30px -15px 0 -3px #18ffff, 31px 0px #18ffff, 29px 9px 0 -3px #18ffff, 24px 23px #18ffff, 17px 30px 0 -3px #18ffff, 0px 33px #18ffff, -10px 28px 0 -3px #18ffff, -24px 22px #18ffff, -29px 14px 0 -3px #18ffff, -31px -3px #18ffff, -30px -11px 0 -3px #18ffff, -20px -25px #18ffff, -12px -30px 0 -3px #18ffff, 5px -29px #18ffff, 13px -25px 0 -3px #18ffff;
                transform: rotate(180deg);
            }
            100% {
                opacity: 0;
                transform: rotate(360deg);
                box-shadow: 25px -22px #18ffff, 15px -22px 0 -3px black, 31px 2px #18ffff, 21px 2px 0 -3px black, 23px 25px #18ffff, 13px 25px 0 -3px black, 0px 33px #18ffff, -10px 33px 0 -3px black, -26px 24px #18ffff, -19px 17px 0 -3px black, -32px 0px #18ffff, -23px 0px 0 -3px black, -25px -23px #18ffff, -16px -23px 0 -3px black, 0px -31px #18ffff, -2px -23px 0 -3px black;
            }
        }
        width: 100vw;
        height: 100vh;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        background: #080915;
        box-shadow: 0px;
        position: relative;
        .loader{
            position: absolute;
            .middle();
            width: 300px;
            height: 300px;
            max-width: 100%;
            border-radius: 50%;
            display: inline-block;
            vertical-align: middle;
            .loader-outter {
                position: absolute;
                border: 4px solid #f50057;
                border-left-color: transparent;
                border-bottom: 0;
                width: 100%;
                height: 100%;
                border-radius: 50%;
                animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite;
                @media (max-width:300px){
                    display: none;
                }
            }
            .loader-inner {
                position: absolute;
                border: 4px solid #f50057;
                border-radius: 50%;
                width: 200px;
                height: 200px;
                left: calc(50% - 100px);
                top: calc(50% - 100px);
                border-right: 0;
                border-top-color: transparent;
                animation: loader-1-inner 1s cubic-bezier(.42, .61, .58, .41) infinite;
                @media (max-width:200px){
                    display: none;
                }
            }
        }
        .loader-2 .loader-star {
            position: absolute;
            width: 60px;
            height: 60px;
            transform: scale(0.7);
            left: calc(50% - 30px);
            top: calc(50% - 30px);
            animation: loader-2-star 1s ease alternate infinite;
        }
        .loader-2 .loader-circles {
            width: 8px;
            height: 8px;
            background: #18ffff;
            border-radius: 50%;
            position: absolute;
            left: calc(50% - 4px);
            top: calc(50% - 4px);
            transition: all 1s ease;
            animation: loader-2-circles 1s ease-in-out alternate infinite;
        }
    }
</style>